/**
 *Filename: wedding_ring_intro.scss
 *Author: xhh
 *Description: 婚戒介绍页，还没有编译的文件，用的是sass语法写
 *Date: 2018.04.03
 */
 // 引入统一，清除各浏览器的默认和差异性
@import "reset.scss";
// 引入公用
@import "base.scss";

/* 主体部分 start */
.wedding-ring-intro-container {
    // 头部标语
    .wedding-ring-slogan {
        position: relative;
        height: 498px;
        background: url(../img/goods/weddingRing/intro/1.jpg) no-repeat center;
        background-size: cover;
        h1 {
            position: absolute;
            top: 44%;
            left: 31%;
            width: 100%;
            font-size: 4.4rem;
            font-weight: 600;
            text-align: center;
            transform: translate(-50%,-50%);
            color: #fff;
            &::first-letter {
                font-size: 7rem;
            }
        }
        p{
            position: absolute;
            left: -3%;
            width: 100%;
            font-size: .875rem;
            color: rgba(#fff,.6);
            text-align: center;
            transform: translate(-50%,-50%);
            text-align: right;
        }
        .first-p {
            top: 56%;
        }
        .second-p {
            top: 60%;
        }
        a {
            position: absolute;
            left: 40%;
            top: 68%;
            padding: .6rem 1rem;
            font-size: .875rem;
            font-weight: 600;
            text-transform: uppercase;
            color: #000;
            background-color: #fff;
            &:hover {
                text-decoration: underline;
                box-shadow: 0 0 10px #ccc;
            }
        }
    }
    // 设计系列
    .wedding-ring-list {
        h2 {
            position: relative;
            margin-top: 7rem;
            text-transform: uppercase;
            text-align: center;
            font-size: 2rem;
            color: #222;
            &:before {
                content: '';
                position: absolute;
                top: -42px;
                left: 50%;
                transform: translate(-50%,0);
                height: 3rem;
                width: 1px;
                background-color: #222;
            }
            &::first-letter {
                font-size: 3rem;
            }
        }
        // 设计图片列表
        .wedding-ring-img-list {
            display: flex;
            flex-flow: wrap;
            justify-content: space-between;
            div {
                width: 50%;
                &:first-child{
                    margin-top: 13rem;
                }
                img {
                    margin-top: .5rem;
                    &:hover{
                        box-shadow: 0 0 16px #e5e5e5;
                        transform: scale(1.02,1.02);
                        transition: all .2s linear;
                    }
                }
            }
        }
        .wedding-ring-artists {
            max-width: 1088px;
            margin-top: 1rem;
            img {
                margin: 0 auto;
            }
            ul {
                display: flex;
                max-width: 84%;
                padding: 0 8% 4%;
                margin: 0 auto;
                text-align: center;
                font-size: .875rem;
                color: #9a9a9a;
                background-color: #e5e5e5;
                li {
                    width: 33.33%;
                }
                h3 {
                    font-size: 1rem;
                    line-height: 2;
                    text-transform: uppercase;
                    color: #222;
                }
                p {
                    max-width: 96%;
                    margin: 1.4rem auto;
                    font-style: italic;
                }
            }
            
        }
    }
}
/* 主体部分 end */